<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100%;
			}
			
			button{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				position:absolute;
			}
			
			button:nth-of-type(1){
				top:250px;
				left:10px;
			}
			
			button:nth-of-type(2){
				top:250px;
				right:10px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/1.jpg"/>
			<button class="lbut"><</button>
			<button class="rbut">></button>
		</div>
		
		<script type="text/javascript">
		    var srcs=["img/1.jpg","img/2.jpg","img/3.jpg"];
		    var div=document.getElementsByTagName("div")[0];
			var imgs=document.getElementsByTagName("img")[0];
			var lbut=document.getElementsByClassName("lbut")[0];
			var rbut=document.getElementsByClassName("rbut")[0];
			
			rbut.onclick=function(){
				var first=srcs.shift();
				srcs.push(first);
				imgs.src=srcs[0];
			}
			
			lbut.onclick=function(){
				var last=srcs.pop();
				srcs.unshift(last);
				imgs.src=srcs[0];
			}
			
			timer=setInterval(function(){
				rbut.onclick();
			},2000);
			
			div.onmouseover=function(){
				clearInterval(timer);
			}
			
			div.onmouseout=function(){
				timer=setInterval(function(){
				rbut.onclick();
				},2000)
			}
		</script>
	</body>
</html>
